<template>
	<view>
		<nav-custom></nav-custom>
		<view class="cont">
			<goods-item v-for="(item,index) in glist" :gdata="item"></goods-item>
		</view>
		<!-- 底部导航栏 -->
		<view class="fixed flex justify-center padding-sm bg-fff">
			<view v-for="(item,index) in tabArr" :key="index" @click="handleTab(item)"
				class="flex justify-around align-center">
				<view class="">{{ item.name }}</view>
				<u-line v-if="index<tabArr.length-1" direction="col" length="15" color="gray" margin="10upx 40upx">
				</u-line>
			</view>
			{{num}}
		</view>
		<!-- 侧边栏 -->
		<u-popup :show="show" mode="left"  @close="handleClose">
					<view class="pop-cont">
						<view v-for="(item,index) in cfylist" >
							<view class="padding-sm u-border-bottom">
								{{item.bname}}
								<view class="cu-tag round bg-yellow color-fff margin-left-xs">
									{{item.num}}
								</view>
							</view>
							<view v-if="index==0">
								<view 
									@tap="listShow=!listShow" 
									class="padding-sm"
									:class="{'u-border-bottom':!listShow}"
								>
									口味筛选
								</view>
								<u-cell-group v-if="listShow">
									<u-cell 
										v-for="(itm,idx) in item.list" 
										:title="itm.tname"
										:name="itm.tname"
										isLink
										@click="handleList(itm,1)"
									></u-cell>
								</u-cell-group>
								<view 
									@click="sceneShow=!sceneShow" 
									class="padding-sm"
									:class="{'u-border-bottom':!sceneShow}"
								>
									场景筛选
								</view>
								<u-cell-group v-if="sceneShow">
									<u-cell 
										v-for="(itm,idx) in item.scene" 
										:title="itm.tname" 
										isLink
										@click="handleList(itm,2)"
									></u-cell>
								</u-cell-group>
							</view>
						</view>
					</view>
				</u-popup>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				glist: [],
				page: 0,
				// condition:{
				// 	bcid:1
				// },
				show: false,
				cfylist: [],
				listShow: false,
				sceneShow: false,
				tabArr: [{
						name: '分类',
						bcid: '',
						target: ''
					},
					{
						name: '蛋糕',
						bcid: '1',
						target: '/pages/cake'
					},
					{
						name: '面包',
						bcid: '11',
						target: '/pages/bread'
					},
					{
						name: '小食',
						bcid: '6',
						target: '/pages/food'
					},
					{
						name: '购物车',
						bcid: '',
						target: '/pages/cart'
					}

				]
			}
		},
		onLoad() {
			this.loadData()
			this.$get('/1.1/classes/classify').then(res => {
				console.log(res);
				this.cfylist = res.results
			})
		},
		computed: {
			num() {
				return this.$store.state.count.num
			},
			condition(){
				return this.$store.state.condition.cond
			}
		},
		onReachBottom() {
			console.log('触底');
			this.loadData()
		},
		onPullDownRefresh() {
			this.glist = []
			this.page = 0
			this.loadData();
		},
		methods: {
			handleDetail(idx) {
				uni.navigateTo({
					url: '../detail/detail/idx=' + idx
				})
				console.log(idx);
			},

			loadData() {
				let skip = this.page * 8
				let wh = JSON.stringify(this.condition)
				let url = `/1.1/classes/goods?where=${wh}&limit=10&skip=${skip}`
				this.$get(url).then(res => {
					uni.stopPullDownRefresh()
					let {
						results
					} = res
					//防止重复
					if (results.length) {
						this.page++
						//展开插入
						this.glist = [
							...this.glist,
							...res.results
						]
						return
					}

					uni.showToast({
						title: '我是有底线的',
						icon: 'none',
						position: "bottom"

					})
				})
			},
			handleTab(item) {
				let {
					bcid,
					target
				} = item
				if (bcid) {
					this.glist = []
					this.page = 0
					// this.condition.bcid = Number(bcid)
					this.$store.commit('changeCondition',{
						bcid:Number(bcid)
					})
					this.reloadData()
				} //显示侧边栏
				if (!bcid & !target) {
					this.show = true
				}
			},
			reloadData(){ //刷新页面数据
							this.glist = []
							this.page = 0
							this.loadData()
						},
			handleClose() {
				this.show = false
			},
			handleList({bid,tid},type){ //口味、场景筛选
							// console.log(typeof bid);
							// console.log(typeof tid);
							let obj = {bcid:bid}
							type===1 ? obj.fid=tid : obj.sid=tid
							this.$store.commit('changeCondition',obj)
							this.reloadData()
							this.show = false
						}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 100upx 0 120upx;
	}

	.cont {
		display: flex;
		flex-wrap: wrap;
		padding: 15upx;
		justify-content: space-between;
	}

	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: 0 0 10upx 1upx rgba(0, 0, 0, .1);
		background-color: rgba(255, 255, 255, .5);
		backdrop-filter: blur(25upx);
		-webkit-backdrop-filter: blur(25upx);

	}

	.pop-cont {
		width: 400upx;
		margin-top: 200upx;
	}
</style>
